<template>
	<view class="page">
		<view class="action">
			<view><image src="/static/center4/scan.png"></image></view>
			<view><image src="/static/center4/setting.png"></image></view>
		</view>
		<view class="user" @click='gotoedit' v-if="userinfo">
			<image class="avatar" :src=userinfo.avatar ></image>
			<view class="name">
				<text>{{userinfo.nickName==null?'未设置':userinfo.nickName}}</text>
				<text>{{userinfo.phonenumber}}</text>
			</view>
			<image class="right" src="/static/center4/right.png"></image>
		</view>
		<view class="tip"> 
			<view>
				<text>余额</text>
				<text>{{userinfo.balance}}</text>
			</view>
			<view>
				<text>积分</text>
				<text>{{userinfo.score}}</text>
			</view>
		</view>
		
		
		<view class="card">
			<u-cell-group :border='false'>
				<u-cell icon="file-text" title="我的简历" :isLink="true" arrow-direction="right" @click='goffer'></u-cell>
				<u-cell icon="shopping-cart" title="全部订单" :isLink="true" url='/pages/user/allorder/allorder'></u-cell>
				<u-cell icon="map-fill" title="地址" :isLink="true" url='/pages/takeout/address/address'></u-cell>
				<u-cell icon="edit-pen" title="修改密码" :isLink="true" url='/pages/user/makepass/makepass'></u-cell>
			</u-cell-group>
			
		</view>
		
		<view class="but">
			<up-button type="primary" text="退出登录" @click='outlogin'></up-button>
		</view>
		
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { axios } from '../../api/request.js';
import {getinfo} from '../../api/useraApi.js';
import {userde} from '@/mock/home.js';

const userinfo=ref({}) //个人信息列表
const img = ref('')  //头像地址
const userid=ref()

//点击跳转到我的简历
const goffer=()=>{
	
	uni.navigateTo({
		url:`/pages/job/offer/offer?id=${userid.value}`
	
	})
}

//点击退出登录
const outlogin=()=>{
	uni.removeStorageSync('token')
	
	let token = uni.getStorageSync('token')
	
	if(token){
	}else{
		uni.navigateTo({
			url:'/pages/user/login/login'
		})
	}
}

//跳转到修改个人中心页面
const gotoedit=()=>{
	uni.navigateTo({
		url:'./edit/edit'
	})
}

//获取个人信息
const getinfodata=async()=>{
	let res =await getinfo({
		header:{
		"Authorization":uni.getStorageSync('token')
		},
		data:{}
	})
   
	if(res.code==200){
		userinfo.value=res.user
		userid.value=res.user.userId
		console.log(userid.value);
		//头像不存在用默认的  存在就有系统的
		if(res.user.avatar==''){
			img.value='../../static/center4/avatar.png'
		}else{
			img.value='http://124.93.196.45:10001/prod-api'+res.user.avatar   
		}
		uni.setStorageSync('userinfo',JSON.stringify(userinfo.value))
	}else{
		 //静态模拟的数据
		userinfo.value=userde()
		userid.value=userde().userId
	}
	
	console.log(userinfo.value);
	
}
	
onMounted(()=>{
		getinfodata()
		
	//进入跳转到用户登录页面
	// let token = uni.getStorageSync('token')
	
	// if(token){
		
	// 	getinfodata()
		
	// }else{
	// 	uni.navigateTo({
	// 		url:'/pages/user/login/login'
	// 	})
	// }
})
	
</script>


<style lang="scss">
	.page {
		background: #f5f5f5;
		min-height: 100vh;
		
		.action{
			display: flex;
			justify-content: flex-end;
			padding: 10rpx;
			background: #fff;
			
			view{
				padding: 10rpx;
				margin: 0 10rpx;
				border-radius: 8rpx;
				width: 45rpx;
				height: 45rpx;
				
				&:active{
					background: #ccc;
				}
				image{
					width: 45rpx;
					height: 45rpx;
				}
			}
		}
		
		.user{
			display: flex;
			align-items: center;
			padding: 25rpx;
			background: #fff;
			
			&:active{
				background: #f0f0f0;
			}
			
			.avatar{
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
			}
			.right{
				width: 30rpx;
				height: 30rpx;
			}
			.name{
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				padding-left: 20rpx;
				
				text{
					&:nth-child(1){
						font-size: 16px;
						font-weight: bold;
					}
					&:nth-child(2){
						font-size: 12px;
						color: #777;
					}
				}
			}
		}
		
		.tip{
			background: #4776EC;
			width: 700rpx;
			margin: auto;
			height: 100rpx;
			border-radius: 12rpx;
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #fff;
			
			view{
				padding-left: 20rpx;
				width: 330rpx;
				
				text{
					font-size: 14px;
					&:nth-child(2){
						font-size: 16px;
						font-weight: bold;
						margin-left: 10rpx;
					}
				}
			}
		}
		
		.card{
			background: #fff;
			box-sizing: border-box;
			width: 700rpx;
			margin: auto;
			padding: 15rpx;
			margin-top: 20rpx;
			border-radius: 12rpx;
			
			.menu{
				
				.item{
					display: flex;
					height: 100rpx;
					align-items: center;
					padding: 0 20rpx;
					box-sizing: border-box;
					width: 700rpx;
					
					&:active{
						background: #f0f0f0;
					}
					
					image{
						height: 45rpx;
						width: 45rpx;
					}
					
					view{
						font-size: 14px;
						color: #444;
						padding-left: 15rpx;
						box-sizing: border-box;
						width: calc(100% - 100rpx);
					}
					
					.arrow{
						width: 26rpx;
						height: 26rpx;
					}
				}
			}
		}
		
		 .but{
			padding: 0px 14px;
			border-radius: 20px;
			margin-top: 20px;
		}
		
	}
</style>